<template>
	<view class="content" >
		<u-navbar :is-back="true" :border-bottom="false">
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 98%;">
				<view class="slot-wrap-left"></view>
				<view class="slot-wrap-center">我的瓶子</view>
				<view class="slot-wrap-right">
					<!--<view style=""
					@click="goPage" data-uri="/pages/business-create/business-create">
						<u-icon name="plus"  size="46"></u-icon>
					</view>-->
				</view>
			</view>
		</u-navbar>
		<my_navbar_ext height="50" bg-color="#ffffff">
			<u-tabs-swiper ref="tabs1" :current="current" @change="tabsChange" :list="tagsList" :is-scroll="false"></u-tabs-swiper>
		</my_navbar_ext>
		<view class="main" >
			
            <view :class="'list0 '+(current == 0 ? 'show' : 'hide')">
				
				<view v-for="(item,index) in list0" :key="item.id" class="bgf p30 mt20">
					<view class="disf pb20 f32">
						   <image :src="item.user_img" class="mr10" style="width: 100rpx;height: 100rpx;flex-shrink: 0;border-radius: 50%;"></image>
						   <view style="width: 580rpx;">
							   <view>{{item.add_time_str}}</view>
						      <view class="col999">{{item.content}}</view>
						   </view>
					</view>
					<view class="bto pt20">
						<view v-if="item.status == 0" style="text-align: center;font-size: 30rpx;">还在漂泊中...</view>
						<view v-else class="disfr-lr">
							<view class="f30 pr" style="position: relative;top:15rpx;">
								<u-icon name="duihao2" custom-prefix="qxl-icon" color="#19be6b" size="32"></u-icon>{{item.prck_time_str}}
							</view>
							<view @click="toUserHome" :data-user_id="item.pick_user_id">
								<image :src="item.prck_img" style="width: 60rpx;height: 60rpx;flex-shrink: 0;border-radius: 50%;" />
								<text class="f30 pr" style="position: relative;top:-16rpx;margin-left: 3rpx;">{{item.prck_name}}</text>
								<u-icon name="arrow-right" color="#999999" style="position: relative;top:-16rpx;"></u-icon>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="list0.length <= 0 && not_load0" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load0" :next_page="next_page0" :list="list0" /><!--分页加载状态-->
				<loading :loading="not_load0"/><!--加载状态-->
			</view>
			
			<view :class="'list1 '+(current == 1 ? 'show' : 'hide')">
				
				<view v-for="(item,index) in list1" :key="item.id" class="bgf p30 mt20">
					<view @click="toUserHome" :data-user_id="item.user_id" class="disf pb10 f32">
						   <image :src="item.user_img" class="mr10" style="width: 100rpx;height: 100rpx;flex-shrink: 0;border-radius: 50%;"></image>
						   <view style="width: 600rpx;">
							   <view class="b disfr-lr">
								   <view>{{item.user_name}}</view>
								   <view><u-icon name="arrow-right" color="#999999" style="position: relative;top:-5rpx;"></u-icon></view>
								</view>
						       <view class="disfr-lr">
								  <view  v-if="item.sex > 0" :class="'sex f26 '+(item.sex == 2 ? 'sex2' : '')">
									  <u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
									  <text class="ml5">{{item.sex == 1 ? '男' : '女'}}</text>
								  </view>
								  <view class="col999 f28">{{item.prck_time_str}}</view>
							   </view>
						   </view>
					</view>
					<view class="bto pt20">
						<view style="font-size: 30rpx;">她说：{{item.content}}</view>
					</view>
				</view>
				
				<view v-if="list1.length <= 0 && not_load1" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load1" :next_page="next_page1" :list="list1" /><!--分页加载状态-->
				<loading :loading="not_load1"/><!--加载状态-->
			</view>
			
			<!--漂流瓶评论-->
			<view :class="'list1 '+(current == 2 ? 'show' : 'hide')">
				
				<view v-for="(item,index) in list2" :key="item.id" class="bgf p30 mt20">
					<view @click="toArticle" :data-drift_bottle_id="item.drift_bottle_id" class="disf pb10 f32">
						   <image :src="item.head_pic" class="mr10" style="width: 100rpx;height: 100rpx;flex-shrink: 0;border-radius: 50%;"></image>
						   <view style="width: 600rpx;">
							   <view class="b disfr-lr">
								   <view>{{item.nickname}}</view>
								   <view v-if="item.author_read == 0"><u-icon name="hongdian-copy" custom-prefix="qxl-icon" color="red" style="position: relative;top:-5rpx;"></u-icon></view>
								   <!--<view><u-icon name="arrow-right" color="#999999" style="position: relative;top:-5rpx;"></u-icon></view>-->
								</view>
						       <view class="disfr-lr">
								  <view  v-if="item.sex > 0" :class="'sex f26 '+(item.sex == 2 ? 'sex2' : '')">
									  <u-icon name="nv" custom-prefix="qxl-icon"  size="30" style="font-weight: bold;"/>
									  <text class="ml5">{{item.sex == 1 ? '男' : '女'}}</text>
								  </view>
								  <view class="col999 f28">{{item.add_time_str}}</view>
							   </view>
						   </view>
					</view>
					<view @click="toArticle" :data-drift_bottle_id="item.drift_bottle_id" class="bto pt20">
						<view style="font-size: 30rpx;">评论：{{item.content}}</view>
					</view>
				</view>
				
				<view v-if="list2.length <= 0 && not_load2" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load2" :next_page="next_page2" :list="list2" /><!--分页加载状态-->
				<loading :loading="not_load2"/><!--加载状态-->
			</view>

		</view>
	   
	   <u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
			
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
// 我扔的瓶子
const page_load0=ref(false);
const not_load0=ref(true);
const next_page0=ref('');
const list0=ref([]);
//我捞的瓶子
const page_load1=ref(false);
const not_load1=ref(true);
const next_page1=ref('');
const list1=ref([]);
//漂流瓶评论
const page_load2=ref(false);
const not_load2=ref(true);
const next_page2=ref('');
const list2=ref([]);
//评论回复
const page_load3=ref(false);
const not_load3=ref(true);
const next_page3=ref('');
const list3=ref([]);
const tagsList=ref([
	{name:'我扔的瓶子'},
	{name:'我捞的瓶子'},
	{name:'漂流瓶评论',count: 0},
	//{name:'评论回复',count: 5},
	]);
const current=ref(0);
//切换
const tabsChange=(e)=>{
	current.value=e;
	if(e == 0){
		if(list0.value.length <= 0){
			loadPage0({},false);
		}
	}else if(e == 1){
		if(list1.value.length <= 0){
			loadPage1({},false);
		}
	}else if(e == 2){
		if(list2.value.length <= 0){
			loadPage2({},false);
		}
	}else if(e == 3){
		if(list3.value.length <= 0){
			loadPage3({},false);
		}
	}
};
////////////////////////////////////////////////////////
//页面加载时
onLoad(async (options)=>{
    loadPage0({},false);
});
const connected=(res)=>{
	
};
//页面显示时执行
onShow(async()=>{
	//评论数
	let ret=await uni.$get('appapi-driftbottle-getcommentnums');
	tagsList.value[2].count=ret.data.comment_num;
	//回复数
	if(tagsList.value[3]){
		ret=await uni.$get('appapi-driftbottle-getreplynums');
		tagsList.value[3].count=ret.data.reply_num;
	}
});
//页面隐藏时执行
onHide(()=>{
	
});

/**
 * 我扔的瓶子
 * @param {Object} options  
 * @param {Object} isPage 
 */
const loadPage0=async (options,isPage)=>{
	not_load0.value=false;
	let ret = await uni.$get('/appapi-driftbottle-myoutbottle',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load0.value=false;
	not_load0.value=true;
	next_page0.value=ret.data.next_page;
	let tempString='';
	if(isPage) list0.value=[...list0.value,...ret.data.list];
	else list0.value=ret.data.list;
	
};
/**
 * 我捞到的瓶子
 * @param {Object} options  
 * @param {Object} isPage   
 */
const loadPage1=async (options,isPage)=>{
	not_load1.value=false;
	let ret = await uni.$get('/appapi-driftbottle-mygetbottle',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load1.value=false;
	not_load1.value=true;
	next_page1.value=ret.data.next_page;
	if(isPage) list1.value=[...list1.value,...ret.data.list];
	else list1.value=ret.data.list;
};

/**
 * 漂流瓶评论
 * @param {Object} options  
 * @param {Object} isPage   
 */
const loadPage2=async (options,isPage)=>{
	not_load2.value=false;
	let ret = await uni.$get('/appapi-driftbottle-getcommentlist',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load2.value=false;
	not_load2.value=true;
	next_page2.value=ret.data.next_page;
	if(isPage) list2.value=[...list2.value,...ret.data.list];
	else list2.value=ret.data.list;
};

onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	/*setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);*/
	if(current.value == 0){
		setTimeout(()=>{
			loadPage0({},false);
			uni.stopPullDownRefresh();
		}, 1000);
	}else if(current.value == 1){
		setTimeout(()=>{
			loadPage1({},false);
			uni.stopPullDownRefresh();
		}, 1000);
	}else if(current.value == 2){
		setTimeout(()=>{
			loadPage2({},false);
			uni.stopPullDownRefresh();
		}, 1000);
	}else if(current.value == 3){
		setTimeout(()=>{
			loadPage3({},false);
			uni.stopPullDownRefresh();
		}, 1000);
	}
});
//上拉触底加载分页
onReachBottom(()=>{
	if(current.value == 0){
		if (!next_page0.value) return;
		if (page_load0.value) return;
		page_load0.value=true;
		setTimeout(()=>{
		  loadPage0(next_page0.value, true); 
		},2000);
	}else if(current.value == 1){
		if (!next_page1.value) return;
		if (page_load1.value) return;
		page_load1.value=true;
		setTimeout(()=>{
		  loadPage1(next_page1.value, true); 
		},2000);
	}else if(current.value == 2){
		if (!next_page2.value) return;
		if (page_load2.value) return;
		page_load2.value=true;
		setTimeout(()=>{
		  loadPage2(next_page2.value, true); 
		},2000);
	}else if(current.value == 3){
		if (!next_page3.value) return;
		if (page_load3.value) return;
		page_load3.value=true;
		setTimeout(()=>{
		  loadPage3(next_page3.value, true); 
		},2000);
	}
	
});
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	//topDropDownShow.value=false;
	//console.log(111111);
	uni.$utils.dataSetPage(event);
};
// 漂流瓶详情页
const toArticle=async (e)=>{
	let drift_bottle_id=e.currentTarget.dataset.drift_bottle_id;;
	let uri='/pages/drift/hig-seas2-desc?id='+drift_bottle_id;
	//设置已读标记 
	let ret=await uni.$get('/appapi-driftbottle-setcommentreads',{id:drift_bottle_id});
	uni.$utils.goPage(uri);
};
//去个人主页
const toUserHome=(e)=>{
	let to=e.currentTarget.dataset.user_id;
	let uri='/pages/user-home/user-home?privateChat=1&user_id='+to+'&tencent_group_id=';
	uni.$utils.goPage(uri);
};
</script>

<style  lang="scss">
	.sex{
		display: inline-block;
		width: 100rpx;
		height: 46rpx;
		border-radius: 4px;
		color:#fff;
		text-align: center;
		line-height: 46rpx;
		background: #fa3534;
	}
	.sex2{
		background: #19be6b;
	}
</style>
